<template>
  <div>
    <h3>AAAAA</h3>
    <p>{{ count }}</p>
    <p>{{ a }}</p>
    <p>{{ b }}</p>
    <button @click="update">按钮</button>
    <button @click="updateA">按钮</button>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  computed,
  watch,
} from "vue";
export default {
  name: "A",
  // props: [],
  // components: {},
  // mixins: []
  setup() {
    // 相当于beforeCreate created
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    onMounted(() => {
      console.log("onMounted");
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });

    // 定义响应式数据
    const count = ref(0);
    // 定义多个响应式数据
    const state = reactive({
      a: 1,
      b: 2,
    });

    // watch(count, (newVal, oldVal) =>{}, { immediate: true, deep: true })

    // computed(() => count.value + 1)
    // computed({
    //   get() {},
    //   set() {}
    // })

    const data = toRefs(state);

    // 定义更新数据的方法
    const update = () => {
      count.value++;
    };

    const updateA = () => {
      data.a.value++;
    };

    // 暴露出去
    return {
      count,
      update,
      ...data,
      updateA,
    };
  },
};
</script>

<style scoped></style>
